<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <!-- <Header contentTitle="专业库"></Header> -->
          <div class="header">
            <span v-show="!hideHeader" @click="backToPrv">
  
              <i class="imgIcon"></i>
            </span>
            <span class="title">专业职业库</span>
          </div>
          <div class="mainDiv">
            <div class="titleTab">
              <tab :line-width="1">
                <tab-item
                  :selected="choTitleTab === item"
                  v-for="(item, index) in titleList"
                  @on-item-click="titleTabClick(item)"
                  :key="index"
                >{{item}}</tab-item>
              </tab>
            </div>
            <div class="content" v-if="choTitleTab == '专业'">
              <ul class="tabLists">
                <li
                  :class="['tabItem', index == majorActiveItem ? 'active' : '', item.type_name.length > 5 ? 'setLineHeight' : '']"
                  v-for="(item, index) of majorTabLists"
                  :key="index"
                  @click="changeMajorActiveItem(index, item.type_code, item.type_name)"
                >{{ item.type_name }}</li>
              </ul>
              <div class="tabRight">
                <div class="tabDetail" v-for="(item, index) of majorDetailLists" :key="index">
                  <div class="detail_title" @click="jumpInToCatalogs(item)">{{ item.catalog_name }}</div>
                  <div class="detail_content">
                    <span
                      v-for="(n, i) of item.majors"
                      :key="i"
                      @click.stop="jumpToMajorDetail(n.major_code)"
                    >{{ n.major_name }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="content" v-else-if="choTitleTab == '职位'">
              <ul class="tabLists">
                <li
                  :class="['tabItem', index == jobActiveItem ? 'active' : '', item.catalog.length > 5 ? 'setLineHeight' : '']"
                  v-for="(item, index) of jobTabLists"
                  :key="index"
                  @click="changeJobActiveItem(index, item)"
                >{{ item.catalog }}</li>
              </ul>
              <div class="tabRight">
                <div class="tabDetail" v-for="(item, index) of jobDetailLists" :key="index">
                  <div class="detail_title" @click="jumpInToJobs(item)">{{ item.position }}</div>
                  <div class="detail_content">
                    <span
                      v-for="(n, i) of item.jobs"
                      :key="i"
                      @click.stop="jumpToJobDetail(n.job_title)"
                    >{{ n.job_title }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="height:1rem;"></div>
        </div>
      </scroller>
      <BuyVip :xBuy="showBuyVip" :returnUrl="returnUrl" :serverName="serverName" @handleCloseBuyDialog="handleCloseBuyDialog"></BuyVip>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem } from "vux";
import Header from "~/components/Header";
import { gettype, getcatalogall, getJobLists } from '~/api/repository'
import { backAppOrWx } from "~/common/common";
import BuyVip from '~/components/BuyVip'
import ls from "store2";
export default {
  components: {
    Header,
    Tab,
    TabItem,
    BuyVip
  },
  data() {
    return {
      titleList: ["专业", "职位"],
      choTitleTab: "专业",
      majorTabLists: [],
      majorActiveItem: 0,
      majorDetailLists: [],
      jobActiveItem: 0,
      jobTabLists: [],
      jobDetailLists: [],
      showBuyVip: false,
      returnUrl: null,
      serverName: '',
      hideHeader: false
    };
  },
  created() {
  
  },
  mounted() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true
    }
    // this.$visit(this.$route.path)
    this.$getVip()
    this.returnUrl = '/wx-yxk/#' + this.$route.fullPath
    if (this.$route.query.type == 2) {
      this.choTitleTab = '职位'
      this.$visit("ProfessionHome")
      this.getJobLists()
    } else {
      this.$visit("MajorHome")
      this.getTypeList(1);
    }
    ls.remove("catalogMsg");
    ls.remove("choTab");
    ls.remove("majorDetailQueryData");
    ls.remove("catalogMsg");
    ls.remove("jobMsg");
    ls.remove("workMsg");
    
    if (ls.get("preUrlEvaluation")) {
      ls.remove("preUrlEvaluation");
    }
  },
  methods: {
    handleCloseBuyDialog() {
      this.showBuyVip = false
    },
    goTeaIndexUrl() {
      let abc = window.location.href;

      this.jumpUrl = decodeURIComponent(
        this.commonJs.GetUrlParam("tea_return_url")
      );
      if (this.jumpUrl) {
        ls.set("jumpsTeaUrl", this.jumpUrl);
        let datas = this.commonJs.GetUrlParam("tea_userData");
        let usersData = JSON.parse(decodeURIComponent(datas));
        ls.set("yxkData", usersData);
        ls.set("userType", usersData.userType);
        ls.set("userArea", usersData.userArea);
        ls.set("tokensyxk", usersData.accessToken);
      }
    },
    backToPrv() {
      backAppOrWx()
    },
    titleTabClick(item) {
      this.choTitleTab = item;
      let typeId = null
      if (item == '专业') {
        this.getTypeList(1);
      } else {
        typeId = 2
        this.getJobLists()
      }
    },
    // 跳到专业列表页
    jumpInToCatalogs(catalog) {
      if (this.commonJs.GetUrlParam('mini_token')) {
        const sendObj = {
          type: catalog.catalog_name,
          mini_token: this.commonJs.GetUrlParam('mini_token')
        }
        console.log(sendObj)
        ls.set("preUrl", "../professional");
        ls.set("catalogMsg", catalog);
        this.$router.push({
          path: "/professional/majorList",
          query: {
            type: catalog.catalog_name,
            mini_token: this.commonJs.GetUrlParam('mini_token')
          }
        });
        // this.goto("/professional/majorList?type=" + catalog.catalog_name + '&mini_token=' + this.commonJs.GetUrlParam('mini_token'));
      } else {
        let isVipstrs = sessionStorage.getItem("isVipStr")
        // if (isVipstrs.indexOf("专业库")>-1) {  //疫情期间注释掉vip判断
          ls.set("preUrl", "../professional");
          ls.set("catalogMsg", catalog);
          this.goto("/professional/majorList", catalog.catalog_name);
        // } else {
        //   this.serverName = '专业库查看详情'
        //   this.showBuyVip = true
        // }
      }
      
    },
    // 跳到专业详情页
    jumpToMajorDetail(type_code) {
      if (this.commonJs.GetUrlParam('mini_token')) {
        ls.set("preUrl", "../professional");
        const params = {
          typeId: ls.get("userType"),
          code: type_code
        };
        // this.goto("/professional/detail", JSON.stringify(params));
        this.$router.push({
          path: '/professional/detail',
          query: {
            type: JSON.stringify(params),
            mini_token: this.commonJs.GetUrlParam('mini_token')
          }
        });
      } else {
        let isVipstrs = sessionStorage.getItem("isVipStr")
        // if (isVipstrs.indexOf("专业库")>-1) { //疫情期间注释掉vip判断
          ls.set("preUrl", "../professional");
          const params = {
            typeId: ls.get("userType"),
            code: type_code
          };
          this.goto("/professional/detail", JSON.stringify(params));
        // } else {
        //   this.serverName = '专业库查看详情'
        //   this.showBuyVip = true
        // }
      }
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    changeMajorActiveItem(index, typeCode, typeName) {
      this.majorActiveItem = index;
      this.getThirdList(typeCode);
    },
    // 获取专业大类
    getTypeList(typeId) {
      this.$loading('open');
      // level --->   1：本科   2：专科
      gettype({ level: typeId })
        .then(res => {
          if (res.code == 200) {
            const data = res.data;
            this.majorTabLists = res.data;
            this.getThirdList(data[0].type_code);
          }
          this.$hideLoading();
        })
        .catch(error => {
          this.$vux.toast.text(error);
          this.$hideLoading();
        });
    },
    // // 根据大类获取专业类和专业列表（两级）
    getThirdList(typeId) {
      getcatalogall({
          type_code: typeId
        })
        .then(res => {
          if (res.code == 200) {
            const data = res.data;
            this.majorDetailLists = res.data;
          }
        });
    },
    changeJobActiveItem(index, item) {
      this.jobActiveItem = index;
      this.jobDetailLists = item.positions;
    },
    // 获取职位列表
    getJobLists() {
      this.$loading('open');
      getJobLists().then(res => {
        this.jobTabLists = res.data
        this.jobDetailLists = res.data[this.jobActiveItem].positions
      }).finally(() => {
        this.$hideLoading();
      })
    },
    jumpInToJobs(item) {
      if (this.commonJs.GetUrlParam('mini_token')) {
        ls.set("preUrl", "../professional");
        this.$router.push({
          path: "/professional/jobList",
          query: {
            type: JSON.stringify(item),
            mini_token: this.commonJs.GetUrlParam('mini_token')
          }
        });
      } else {
        let isVipstrs = sessionStorage.getItem("isVipStr")
        // if (isVipstrs.indexOf('职业库')>-1) { //疫情期间注释掉vip判断
          ls.set("preUrl", "../professional");
          this.goto("/professional/jobList", JSON.stringify(item));
        // } else {
        //   this.serverName = '职业库查看详情'
        //   this.showBuyVip = true
        // } 
      }
      
    },
    jumpToJobDetail(jobTitle) {
      if (this.commonJs.GetUrlParam('mini_token')) {
        ls.set("preUrl", "../professional")
        ls.remove('jobMsg')
        this.$router.push({
          path: '/professional/jobDetail',
          query: {
            type: jobTitle,
            mini_token: this.commonJs.GetUrlParam('mini_token')
          }
        });
      } else {
        let isVipstrs = sessionStorage.getItem("isVipStr")
        // if (isVipstrs.indexOf('职业库')>-1) { //疫情期间注释掉vip判断
          ls.set("preUrl", "../professional")
          ls.remove('jobMsg')
          this.goto('/professional/jobDetail', jobTitle);
        // } else {
        //   this.serverName = '职业库查看详情'
        //   this.showBuyVip = true
        // }    
      }
    },
  }
};
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .header {
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    padding: 0 0.32rem;
    background: transparent;
    text-align: center;
    z-index: 100;

    .imgIcon {
      float: left;
      margin-top: 0.2rem;
      width: 0.4rem;
      height: 0.4rem;
    display:block;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
    background-size:3rem 2.4rem; 
    }

    .title {
      color: #222;
      font-size: 0.36rem;
      font-weight: bold;
      text-align: center;
      height: 0.88rem;
    }
  }

  .mainDiv {
    margin-top: 0.32rem;

    .titleTab {
      padding: 0 1.75rem;
      margin-bottom: 0.32rem;
      /deep/ .vux-tab {
        width: 4rem;
        height: 0.8rem;
        border-radius: 0.4rem;
        border: 1px solid rgba(229, 232, 237, 1);
        padding: 0.08rem;
        .vux-tab-item {
          width: 1.88rem;
          line-height: 0.64rem;
          background: #fff;
          border-radius: 0.32rem;
          color: #999;
          font-size: 0.3rem;
          font-weight: bold;
        }
        .vux-tab-item.vux-tab-selected {
          background: @mainColor;
          color: #fff;
        }
        .vux-tab-ink-bar {
          background-color: transparent;
        }
      }
    }
    .content {
      width: 100%;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 10px 0px rgba(153, 153, 153, 0.2);
      background: #f7f7fa;
      display: flex;
      justify-content: flex-start;
      .tabLists {
        padding-left: 0;
        list-style: none;
        width: 2.4rem;

        .tabItem {
          width: 100%;
          height: 0.96rem;
          line-height: 0.96rem;
          font-size: 0.3rem;
          color: #222;
          text-align: center;
          position: relative;
        }
        li.tabItem.active {
          background: #fff;
          color: @mainColor;
        }
        li.tabItem.setLineHeight {
          line-height: 0.42rem;
        }
        // li.tabItem.active:before {
        //   content: "";
        //   display: inline-block;
        //   width: 0.12rem;
        //   height: 0.24rem;
        //   background: @mainColor;
        //   border-radius: 0.08rem;
        //   position: absolute;
        //   top: 0.36rem;
        //   left: 0.2rem;
        // }
      }
      .tabRight {
        width: 100%;
        background: #fff;
        padding: 0.32rem;
        .tabDetail {
          margin-bottom: 0.1rem;
          .detail_title {
            padding: 0.16rem 0 0.32rem;
            border-bottom: 1px solid #e5e8ed;
            margin-bottom: 0.32rem;
            line-height: 0.4rem;
            font-size: 0.32rem;
            font-weight: bold;
            color: #000;
            letter-spacing: 2px;
          }
          .detail_content {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            span {
              font-size: 0.28rem;
              color: #000;
              line-height: 0.4rem;
              margin-bottom: 0.3rem;
              margin-right: 0.4rem;
            }
          }
        }
      }
    }
  }
}
</style>
